const GenderCheckbox = ({ onCheckboxChange, selectedGender }) => {
  return (
    <div className="flex justify-center mt-2">
      <div className="form-control">
        <label
          className={`label gap-2 cursor-pointer ${selectedGender === "male" ? "selected" : ""}`}
          htmlFor="Male"
        >
          <span className="label-text mr-1">Male</span>
          <input
            id="Male"
            type="checkbox"
            className="checkbox border-slate-900 align-middle"
            checked={selectedGender === "male"}
            onChange={() => onCheckboxChange("male")}
          />
        </label>
      </div>

      <div className="form-control">
        <label
          className={`label gap-2 cursor-pointer ${selectedGender === "female" ? "selected" : ""}`}
          htmlFor="Female"
        >
          <span className="label-text mr-1">Female</span>
          <input
            id="Female"
            type="checkbox"
            className="checkbox border-slate-900 align-middle"
            checked={selectedGender === "female"}
            onChange={() => onCheckboxChange("female")}
          />
        </label>
      </div>
    </div>
  );
};

export default GenderCheckbox;
